mixin chain-extends({cover = 1, contentHeight = 1})
  -var {url: coverUrl, width: coverWidth, height: coverHeight} = images[cover]
  -var ratio = (contentHeight + coverHeight) / coverHeight * 100
  -console.log({ratio, coverHeight, contentHeight})

  section(style=`line-height:0;font-size:0;margin:0;padding:0;overflow:hidden;box-sizing:border-box;visibility:visible`)
    section(style=`height:0;visibility:visible`)
      block content

    section(style=`pointer-events:none;font-size:0;line-height:0;text-align:left;transform:scale(1) translateZ(.01px)`)
      svg(viewBox=`0 0 ${coverWidth} ${coverHeight}`, 
      style=`pointer-events:none;max-width:none!important;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1)`, 
      space=`default`)
        g
          block cover

        animate(attributeName=`width`, fill=`freeze`, restart=`never`, calcMode=`spline`, 
          keySplines=`0.42 0 0.58 1.0; 0.42 0 0.58 1.0`, keyTimes=`0;0.0001;1`, 
          values=`100%;${ratio}%;${ratio}%`, dur=`30000s`, begin=`click+0.5s`)

